<template>
	<view class="order-item">
		<view class="top-container" @click="onClick">
			<view class="head-container">
				<view class="order-title u-flex">
					<!-- 订单标题 -->
					<u-image src="../../static/carry-inner-icon/order-item/order.png" height="25px" width="25px">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="u-flex-1">{{orderTitle}}</view>
					<view class="status-container u-flex u-row-right">
						<template v-if="orderStatus == 1">
							<view class="status">
								已接单
							</view>
						</template>
						<template v-else-if="orderStatus == 0">
							<view class="status unReceived">
								待接单
							</view>
						</template>
						<template v-else-if="orderStatus == 2">
							<view class="status finished">
								已完成
							</view>
						</template>
						<template v-else-if="orderStatus ==3">
							<view class="status cancel">
								已取消
							</view>
						</template>
					</view>
				</view>
				<view class="order-info">
					<!-- 订单信息 -->
					<view class="from-place u-flex item">
						<u-image src="../../static/carry-inner-icon/home-item/to_bule.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">取件地点</view>
						<view class="content u-flex u-flex-wrap u-flex-1">{{fromPlace}}</view>
					</view>
					<view class="to-place u-flex item">
						<u-image src="../../static/carry-inner-icon/home-item/to_red.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">送达地点</view>
						<view class="content u-flex u-flex-wrap u-flex-1">{{toPlace}}</view>
					</view>
					<view class="remarks u-flex item">
						<u-image src="../../static/carry-inner-icon/task-detail/bz.png" height="18px" width="18px">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="title">备注</view>
						<view class="content u-flex u-flex-wrap u-flex-1">{{remarks}}</view>
					</view>
				</view>
				<view class="order-contacts u-flex u-row-right">
					<!-- 联系人 -->
					<view>
						<template v-if="userType == 0">
							<view class="deliver">骑手</view>
						</template>
						<template v-else-if="userType == 1">
							<view class="receiver">收货人</view>
						</template>
					</view>
					<template v-if="userType == 0">
						<template v-if="orderStatus == 0">
							<view class="user">暂无人员接单</view>
						</template>
						<template v-else>
							<view class="user">{{workerName}}</view>
							<view class="phone u-flex">
								<u-image src="../../static/carry-inner-icon/order-item/phone_orderItem.png" height="15px" width="15px" v-if="phoneNumber == null">
									<u-loading slot="loading"></u-loading>
								</u-image>
								<view class="number">
									<template v-if="workerPhoneNumber == null">
										<view>暂无</view>
									</template>
									<template v-else>
										{{workerPhoneNumber}}
									</template>
								</view>
							</view>
						</template>
					</template>
					<template v-else-if="userType == 1">
						<view class="user">{{user}}</view>
						<view class="phone u-flex">
							<u-image src="../../static/carry-inner-icon/order-item/phone_orderItem.png" height="15px" width="15px" v-if="phoneNumber == null">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="number">

								<template v-if="phoneNumber == null">
									<view>暂无</view>
								</template>
								<template v-else>
									{{phoneNumber}}
								</template>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="mid-container u-flex u-row-right">
			<!-- 付款信息 -->
			<view class="title u-flex">
				<u-icon name="question-circle-fill" size="30" style="margin-right: 15rpx;" @click="onInfoClick" color="#7a7a7a"></u-icon>
				<template v-if="userType == 0">
					需付款
				</template>
				<template v-else-if="userType == 1">
					可得到
				</template>
			</view>
			<view class="money">
				{{money}}
			</view>
		</view>
		<view class="bottom-container u-flex u-row-right">
			<!-- 操作 -->
			<template v-if="userType == 0">
				<!-- 发单人操作 -->
				<template v-if="orderStatus != 3 && orderStatus != 2">
					<u-button size="mini" shape="circle" class="button-item" @click="onCancelClick">取消订单</u-button>
				</template>
				<template v-if="orderStatus == 1">
					<u-button size="mini" shape="circle" class="button-item" @click="onConfirmClick">确认完成</u-button>
				</template>
			</template>
			<template v-if="userType == 1">
				<!-- 接单人操作 -->
				<template v-if="orderStatus != 3 && orderStatus != 2">
					<u-button size="mini" shape="circle" class="button-item" @click="onCancelClick">取消订单</u-button>
				</template>
				
				<!-- 老板说不要 -->
<!-- 				<template v-if="orderStatus == 1">
				<u-button size="mini" shape="circle" class="button-item" @click="onConfirmClick">确认交货</u-button>
				</template> -->
			</template>
		</view>

		<u-popup v-model="infoShow" mode="center" border-radius="14" width="700rpx" height="200rpx" class="question-container"
		 closeable close-icon-pos="top-right">
			<view class="question-title u-flex u-row-center">
				<view class="content">费用说明</view>
			</view>
			<view class="question-content">
				<template v-if="userType == 0">
					您需要支付给骑手商品金额,显示的金额为跑腿费用!
				</template>
				<template v-else-if="userType == 1">
					您将获得发布者打赏的跑腿金额
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * 作者: 臧锡洋
	 * 2020年11月18日 20:28:51
	 * 订单item组件
	 * TODO -> 需要判断当前订单的状态来显示不同的操作按钮,如 确认收货,确认交货等
	 */
	export default {
		props: {
			orderTitle: {
				type: String,
				require: true
			},
			/*
			 * 状态应有->
			 * 已接单,待接单,已完成,已取消
			 */
			orderStatus: [String,Number],
			user: {
				type: String,
				default: '暂无'
			},
			workerName:{
				type:String,
				default: '暂无'
			},
			phoneNumber: {
				type: String,
				default: '暂无'
			},
			workerPhoneNumber: {
				type: String,
				default: '暂无'
			},
			remarks: String,
			fromPlace: String,
			toPlace: String,
			// 用户类型: 发单人 -> 0 , 接单人 -> 1
			userType: [String,Number],
			money: [String,Number]
		},
		data() {
			return {
				/* orderTitle: '帮忙带奶茶', */
				/* 
				 * 状态应有->
				 * 已接单,待接单,已完成,已取消
				 */
				/* orderStatus: '已接单',
				postUser: '李小姐',
				phoneNumber: '13360258974',
				remarks: '珍珠奶茶,大杯,少糖,去冰',
				fromPlace: '食堂二楼缤果奶茶店',
				toPlace: '女生公寓3栋311', */
				infoShow: false,
				// 用户类型: 发单人 -> 0 , 接单人 -> 1
				/* userType: 0,
				money: 5.50 */
			};
		},
		methods: {
			// 问号被单击
			onInfoClick() {
				this.infoShow = true
			},
			// 确认被单击,返回回调给父组件
			onConfirmClick() {
				this.$emit('confirm')
			},
			// 取消被单击,返回回调给父组件
			onCancelClick() {
				this.$emit('cancel')
			},
			// 非按钮容器区域被单击
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
	@import "common/constant.scss";

	.order-item {
		position: relative;
		background: #fff;
		margin: 15rpx 30rpx;
		border-radius: 5px;
		padding: 15rpx;

		.order-status {
			position: absolute;
			right: 0;
			top: 0;
			width: 120rpx;
			background-color: #2B85E4;
		}

		.head-container {
			.order-title {
				position: relative;
				font-size: 16px;
				font-weight: bold;

				.status-container {
					.status {
						font-weight: 500;
						font-size: 14px;
						padding: 5rpx 20rpx;
						border-radius: 10px;
						color: #FFFFFF;
						/* 默认为已接单背景 */
						background-color: $orderReceived;

						&.cancel {
							/* 取消状态背景 */
							background-color: $orderCancel;
						}

						&.finished {
							/* 完成状态背景 */
							background-color: $orderFinished;
						}

						&.unReceived {
							/* 未接单状态背景 */
							background-color: $orderUnReceived;
						}
					}
				}

				&::after {
					content: '';
					position: absolute;
					width: 150rpx;
					height: 8rpx;
					bottom: -13rpx;
					left: 15rpx;
					border-radius: 10px;
					background-color: #e5c63d;
				}
			}

			.order-info {
				margin: 20rpx 15rpx;

				.item:nth-child(n+2) {
					margin-top: 10rpx;
				}

				.title {
					color: #606266;
					margin-left: 30rpx;
					width: 120rpx;
				}

				.content {
					margin-left: 30rpx;
				}
			}

			.order-contacts {
				margin: 10rpx 15rpx;

				.user {
					font-weight: 600;
				}

				.phone {
					margin-left: 30rpx;

					.number {
						margin-left: 10rpx;
					}
				}
			}
		}

		.mid-container {
			/* 付款信息 */
			margin: 5rpx 15rpx;

			.money {
				font-size: 16px;
				font-weight: 600;
				margin-left: 15rpx;

				&::before {
					content: '￥';
					font-size: 13px;
					font-weight: 500;
					margin-right: 5rpx;
				}
			}
		}

		.bottom-container {
			margin-top: 15rpx;

			.button-item {
				display: block;
				margin: 0;
				height: 70rpx !important;
				line-height: 70rpx !important;

				&:nth-child(n+2) {
					margin-left: 30rpx;
				}
			}
		}
	}

	.question-container {
		.question-title {
			position: relative;
			padding: 10rpx;
			font-size: 18px;
			font-weight: 600;

			.content {
				position: relative;

				&::after {
					content: "";
					position: absolute;
					bottom: -18rpx;
					right: 0;
					height: 15rpx;
					width: 110rpx;
					border-radius: 15px;
					background: #D08A67;
				}
			}
		}

		.question-content {
			padding: 30rpx 35rpx;
		}
	}

	.deliver,
	.receiver {
		margin-right: 20rpx;
		border-radius: 20rpx;
		color: #fff;
		padding: 3rpx 20rpx;
	}

	.deliver {
		background-color: #6895fc;
	}

	.receiver {
		background-color: #fc6880;
	}
</style>
